<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{data1.userTotal}}</div>
                                    <div>用户数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-lx-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{data1.organTotal}}</div>
                                    <div>机构数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-lx-notice grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{data1.logsTotal}}</div>
                                    <div>日志数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 10px;">
            <el-col :span="12">
                <el-card shadow="hover">
                    <div id="myChart1" :style="{width: '100%', height: '300%'}"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover">
                    <div id="myChart2" :style="{width: '100%', height: '300%'}"></div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 10px;">
            <el-col :span="24">
                <el-card shadow="hover">
                    <div id="myChart3" :style="{width: '100%', height: '300%'}"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: 'dashboard',
        views: {},
        data() {
            return {
                that: this,
                url_getCount:'/auth/census/count',
                url_getYhJgRz: '/auth/home/getYhJgRz',
                url_getUserNum: '/auth/census/census_organ_user',
                url_getZzjgNum: '/auth/census/census_organ',
                url_getCzrzNum: '/auth/census/census_organ',
                tableData: [],
                data1: {},
                iconPath:'path://M772 101q-87 -78 -197.5 -96t-216.5 27q-106 48 -167.5 142t-62.5 210h64q1 -101 55.5 -181t148.5 -117q94 -36 188.5 -14t163.5 96h-125v64h213v-213h-64v82zM276 600h125v-64h-213v213h64v-82q87 78 197.5 96t217.5 -27q106 -48 167 -142t62 -210h-64q-1 101 -55.5 181\n' +
                    't-148.5 117q-94 36 -188.5 14t-163.5 -96z'
            }
        },
        computed: {},
        created() {
            this.$nextTick(() => {
                let val = {};
                val.qhdm = localStorage.getItem('ms_qhdm');//区划代码
                val.qhjb = localStorage.getItem('ms_qhjb');//区划级别
                this.getCount(val);
                this.getUserNum(val);
                this.getZzjgNum(val);
                this.getCzrzNum(val);
            });
        },
        methods: {
            /*获取用户数、机构数、日志数*/
            getCount(val) {
                this.$post(this.url_getCount, val).then(res => {
                    if (res) {
                        this.data1 = res.data;
                    }
                })
            },
            /*获取用户数*/
            getUserNum(val) {
                this.$post(this.url_getUserNum, val).then(res => {
                    if (res) {
                        let legendData = [];
                        let seriesData = [];
                        for (let i = 0; i < res.data.length; i++) {
                            legendData.push(res.data[i].qhmc);
                            seriesData.push({
                                'value': res.data[i].count,
                                'name': res.data[i].name,
                                'qhdm': res.data[i].code,
                                'qhjb': res.data[i].name
                            });
                        }
                        let that = this;
                        // 基于准备好的dom，初始化echarts实例
                        let myChart = this.$echarts.init(document.getElementById('myChart1'));
                        // 绘制图表
                        myChart.setOption({
                            title: {
                                text: '用户统计',
                                left: 'center',
                                top: 15,
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)',
                            },
                            legend: {
                                orient: 'vertical',
                                top: window.innerHeight - 560,
                                left: 20,
                                data: legendData
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    myTool: {
                                        show: true,
                                        title: '刷新',
                                        icon: this.iconPath,
                                        onclick: function () {
                                            let val = {};
                                            val.qhdm = localStorage.getItem('ms_qhdm');//区划代码
                                            val.qhjb = localStorage.getItem('ms_qhjb');//区划级别
                                            that.getUserNum(val);
                                        }
                                    },
                                }
                            },
                            series: [
                                {
                                    name: '用户数',
                                    type: 'pie',
                                    radius: '65%',
                                    center: ['60%', '58%'],
                                    data: seriesData,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        });
                        myChart.on('click', function (params) {
                            if (params.data.qhjb != '3') {
                                let val = {};
                                val.qhdm = params.data.qhdm;
                                val.qhjb = params.data.qhjb;
                                that.getUserNum(val);
                            }
                        });
                    }
                })
            },
            /*获取组织机构数*/
            getZzjgNum(val) {
                this.$post(this.url_getZzjgNum, val).then(res => {
                    if (res) {
                        let xAxisData = [];
                        let seriesData = [];
                        for (let i = 0; i < res.data.length; i++) {
                            xAxisData.push(res.data[i].name);
                            seriesData.push({
                                'value': res.data[i].count,
                                'name': res.data[i].name,
                                'qhdm': res.data[i].code,
                                'qhjb': res.data[i].name
                            });
                        }
                        let that = this;
                        // 基于准备好的dom，初始化echarts实例
                        let myChart = this.$echarts.init(document.getElementById('myChart2'));
                        // 绘制图表
                        myChart.setOption({
                            title: {
                                text: '机构统计',
                                left: 'center',
                                top: 15,
                            },
                            tooltip: {},
                            xAxis: {
                                data: xAxisData
                            },
                            yAxis: {},
                            toolbox: {
                                show: true,
                                feature: {
                                    myTool: {
                                        show: true,
                                        title: '刷新',
                                        icon: this.iconPath,
                                        onclick: function () {
                                            let val = {};
                                            val.qhdm = localStorage.getItem('ms_qhdm');//区划代码
                                            val.qhjb = localStorage.getItem('ms_qhjb');//区划级别
                                            that.getZzjgNum(val);
                                        }
                                    },
                                }
                            },
                            series: [{
                                name: '机构数',
                                type: 'bar',
                                data: seriesData
                            }]
                        });
                        myChart.on('click', function (params) {
                            if (params.data.qhjb != '3') {
                                let val = {};
                                val.qhdm = params.data.qhdm;
                                val.qhjb = params.data.qhjb;
                                that.getZzjgNum(val);
                            }
                        });
                    }
                })
            },
            /*获取操作日志数*/
            getCzrzNum(val) {
                this.$post(this.url_getCzrzNum, val).then(res => {
                    if (res) {
                        let xAxisData = [];
                        let seriesData = [];
                        for (let i = 0; i < res.data.length; i++) {
                            xAxisData.push(res.data[i].name);
                            seriesData.push({
                                'value': res.data[i].count,
                                'name': res.data[i].name,
                                'qhdm': res.data[i].code,
                                'qhjb': res.data[i].name
                            });
                        }
                        let that = this;
                        // 基于准备好的dom，初始化echarts实例
                        let myChart = this.$echarts.init(document.getElementById('myChart3'));
                        // 绘制图表
                        myChart.setOption({
                            title: {
                                text: '日志统计',
                                left: 'center',
                                top: 15,
                            },
                            tooltip: {},
                            xAxis: {
                                type: 'category',
                                data: xAxisData
                            },
                            yAxis: {
                                type: 'value'
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    myTool: {
                                        show: true,
                                        title: '刷新',
                                        icon: this.iconPath,
                                        onclick: function () {
                                            let val = {};
                                            val.qhdm = localStorage.getItem('ms_qhdm');//区划代码
                                            val.qhjb = localStorage.getItem('ms_qhjb');//区划级别
                                            that.getCzrzNum(val);
                                        }
                                    },
                                }
                            },
                            series: [{
                                name: '日志数',
                                type: 'line',
                                data: seriesData
                            }]
                        });
                        myChart.on('click', function (params) {
                            if (params.data.qhjb != '3') {
                                let val = {};
                                val.qhdm = params.data.qhdm;
                                val.qhjb = params.data.qhjb;
                                that.getCzrzNum(val);
                            }
                        });
                    }
                })
            },
            mounted() {

            },
        }
    }
</script>
<style scoped>

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }

    .user-info-cont div:first-child {
        font-size: 30px;
        color: #222;
    }

    .user-info-list span {
        margin-left: 70px;
    }

    .mgb20 {
        margin-bottom: 20px;
    }

    .schart {
        width: 100%;
        height: 300px;
    }

</style>
